<template>
    <!-- 1. 了解即可 -->
    <h1 style="color: red">我是 App.vue 组件</h1>

    <!-- 2. 推荐 -->
    <h1 class="title">我是第二个 h1</h1>

    <!-- 3. 不推荐 -->
    <h1 class="title_2">我是第二个 h1</h1>
</template>

<script>
import './app.css'
export default {
    data() {
        return {
            url: "https://www.baidu.com/",
        };
    },
};
</script>


<!--
    scoped
        属性是帮助我们解决 代码量多了之后可能会出现的 类名重复的问题
                因为我们是单文件组件, 一旦类名重复, 那么样式就会出现问题

        所以 scoped 会将我们的标签上添加一个特殊的标识
            将来寻找类名的时候, 特殊标识如果不一致, 就不应用样式
 -->
<style scoped>
.title {
    color: blue;
}
</style>
